import { useEffect, useState } from 'react';
import './Weather.css';
import AMapLoader from '@amap/amap-jsapi-loader';
import weeks from '../lib/week';

function Weather() {

    const [city, setCity] = useState('北京市')
    const [weather, setWeather] = useState({})
    const [futuerWeather, setFutuerWeather] = useState({})

    // console.log(futuerWeather.forecasts[1]);


    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "13c7cf752a0ebd4ea22a96a3a4cd8f3f",
        }
    }, [])

    AMapLoader.load({
        key: "bf8ee01e59ea45c720198e837a95be07", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
        // 高德地图插件已经生效
        // 获取城市定位
        getLocalCity(AMap)
        // 
    })

    const getLocalCity = (AMap) => {
        AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(async function (status, result) {
                console.log(status);

                if (status === 'complete' && result.info === 'OK') {
                    // 查询成功，result即为当前所在城市信息
                    console.log(result);
                    await setCity(result.city)
                    // 获取所在城市的天气
                    getWeather(AMap, result.city)
                    getFutuerWeather(AMap, result.city)
                }
            })
        })
    }

    const getWeather = (AMap, mycity) => {
        //加载天气查询插件
        AMap.plugin("AMap.Weather", function () {
            //创建天气查询实例
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive(mycity, function (err, data) {
                console.log(err, data);
                setWeather(data)
            });
        });
    }

    const getFutuerWeather = (AMap, mycity) => {
        //加载天气查询插件
        AMap.plugin("AMap.Weather", function () {
            //创建天气查询实例
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getForecast(mycity, function (err, data) {
                console.log(err, data);
                setFutuerWeather(data);
                console.log(data);

                //err 正确时返回 null
                //data 返回天气预报数据，返回数据见下表
            });
        });
    }

    return (
        <div className="weather">
            <div className="head">
                <div className="city">
                    <i className="iconfont icon-dingwei"></i>
                    {city}
                </div>
                <div className="changeCity">
                    <div className="changeCity-btn">
                        <i className="iconfont icon-24gf-city"></i>
                        切换城市
                    </div>
                </div>
            </div>
            <div className="border">
                <div className="today">
                    <div className="today-tem">
                        <div className="tem-info">{weather.temperature}℃</div>
                        <div className="weather-info">{weather.weather}</div>
                    </div>
                    <div className="today-win">
                        <ul>
                            <li>
                                <i className="iconfont icon-shidu"></i>
                                <p id='category'>湿度</p>
                                <p>{weather.humidity}%</p>
                            </li>
                            <li>
                                <i className="iconfont icon-fengxiang"></i>
                                <p id='category'>风向</p>
                                <p>{weather.windDirection}风</p>
                            </li>
                            <li>
                                <i className="iconfont icon-mti-fengli"></i>
                                <p id='category'>风力</p>
                                <p>{weather.windPower}级</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="futuer">
                    <div className="futuer-title">三日天气预报</div>
                    <ul className="futuer-list">
                        {futuerWeather.forecasts && futuerWeather.forecasts.length > 3 ? (
                            <>
                                <li className='futuer-item'>
                                    <div className="week">{weeks(futuerWeather.forecasts[1].week)}</div>
                                    <div className="pic">
                                        <img src="https://img1.baidu.com/it/u=1896439509,3094130941&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="" />
                                    </div>
                                    <div className="max-min">{futuerWeather.forecasts[1].dayTemp}℃ / {futuerWeather.forecasts[1].nightTemp}℃</div>
                                </li>
                                <li className='futuer-item'>
                                    <div className="week">{weeks(futuerWeather.forecasts[2].week)}</div>
                                    <div className="pic">
                                        <img src="https://img1.baidu.com/it/u=1896439509,3094130941&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="" />
                                    </div>
                                    <div className="max-min">{futuerWeather.forecasts[2].dayTemp}℃ / {futuerWeather.forecasts[2].nightTemp}℃</div>
                                </li>
                                <li className='futuer-item'>
                                    <div className="week">{weeks(futuerWeather.forecasts[3].week)}</div>
                                    <div className="pic">
                                        <img src="https://img1.baidu.com/it/u=1896439509,3094130941&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="" />
                                    </div>
                                    <div className="max-min">{futuerWeather.forecasts[3].dayTemp}℃ / {futuerWeather.forecasts[3].nightTemp}℃</div>
                                </li>
                            </>
                        ) : (
                            <div>加载中...</div>
                        )}
                    </ul>
                </div>
                <div className="tendency"></div>
            </div>
            <div className="container"></div>
        </div>
    )
}
export default Weather;